<template>
  <div style="display: flex;margin-bottom: 16px; align-items: center;">
    <div style="display: flex; align-items: center;margin-right: auto">
      <a-select v-model:value="type" style="width: 250px">
        <a-select-option value="container">柜号</a-select-option>
        <a-select-option value="stpo">头程计划号</a-select-option>
        <a-select-option value="soCode">提单号</a-select-option>
      </a-select>
      <a-input v-model:value="searchValue" style="margin-left: 5px;lwidth: auto"/>
      <a-button style="margin-left: 10px" type="primary" @click="search">查询</a-button>
      <a-button style="margin-left: 10px" type="primary" @click="reset">重置</a-button>
    </div>
    <div>
      <a-button type="primary" @click="refresh">刷新</a-button>
    </div>
  </div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="基础信息">
        <a-spin :spinning="loading">
          <div class="container">
            <div style="width:50%">
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                <span style="font-size: 16px;font-weight: bold">基础信息</span>
                <a-button v-if="modulePerm(['shippingDetail:edit'])" type="primary" @click="handleEdit('base')">编辑</a-button>
              </div>
              <a-descriptions :column="{xs:1,sm:1,md:2,lg:2,xl:2,xxl:2}">
                <a-descriptions-item label="柜号">{{baseInfo.containerNo}}</a-descriptions-item>
                <a-descriptions-item label="提货号">{{baseInfo.soCode}}</a-descriptions-item>
                <a-descriptions-item label="头程计划号">{{baseInfo.stpoCode}}</a-descriptions-item>
                <a-descriptions-item label="预估价值">{{baseInfo.value}}</a-descriptions-item>
                <a-descriptions-item label="船东">{{baseInfo.shipOwner}}</a-descriptions-item>
                <a-descriptions-item label="国家">{{baseInfo.country}}</a-descriptions-item>
                <a-descriptions-item label="发货仓">{{baseInfo.fromWarehouseCode}}</a-descriptions-item>
                <a-descriptions-item label="目的仓">{{baseInfo.warehouseCode}}</a-descriptions-item>
                <a-descriptions-item label="起运港">{{baseInfo.shipmentPort}}</a-descriptions-item>
                <a-descriptions-item label="目的港">{{baseInfo.targetPort}}</a-descriptions-item>
                <a-descriptions-item label="空柜重">{{baseInfo.containerWeight}}</a-descriptions-item>
                <a-descriptions-item label="货物总重量">{{baseInfo.weight + ' kg'}}</a-descriptions-item>
                <a-descriptions-item label="柜型">{{baseInfo.containerType}}</a-descriptions-item>
                <a-descriptions-item label="方数">{{baseInfo.volume + ' m³'}}</a-descriptions-item>
                <a-descriptions-item label="件数">{{baseInfo.qty}}</a-descriptions-item>
                <a-descriptions-item label="sku款数">{{baseInfo.skuQty}}</a-descriptions-item>
                <a-descriptions-item label="备注">{{baseInfo.memo}}</a-descriptions-item>
                <a-descriptions-item label="过磅单货重">{{baseInfo.goodsWeightOfWeighingList? baseInfo.goodsWeightOfWeighingList + ' kg' : ""}}</a-descriptions-item>
                <a-descriptions-item label="海外仓收货异常备注">{{baseInfo.takeGoodsErrorRemark}}</a-descriptions-item>
                <a-descriptions-item label="是否收货异常">{{baseInfo.isErrorTakeGoods === 'Y' ? '是' : baseInfo.isErrorTakeGoods === 'N' ? '否' : ''}}</a-descriptions-item>
              </a-descriptions>
              <a-divider/>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                <span style="font-size: 16px;font-weight: bold">卡车信息</span>
                <a-button v-if="modulePerm(['shippingDetail:edit'])" type="primary" @click="handleEdit('track')">编辑</a-button>
              </div>
              <a-descriptions :column="{xs:1,sm:1,md:3,lg:3,xl:3,xxl:3}">
                <a-descriptions-item label="司机电话">{{trackInfo.driverTel}}</a-descriptions-item>
                <a-descriptions-item label="卡车车牌号">{{trackInfo.licenseNum}}</a-descriptions-item>
                <a-descriptions-item label="封条号">{{trackInfo.sealCode}}</a-descriptions-item>
              </a-descriptions>
              <div style="display: flex;flex-wrap: wrap;">
                <span>图片：</span>
                <div>
                  <a-image
                      v-for="(pic,index) in imgList"
                      :key="index"
                      :src="pic"
                      :width="100"
                  />
                </div>
              </div>
            </div>
            <div style="width:49%;margin-left: 10px">
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                <span style="font-size: 16px;font-weight: bold"></span>
                <a-button v-if="modulePerm(['shippingDetail:edit'])" type="primary" @click="handleEdit('truck')">编辑</a-button>
              </div>
              <a-card>
                <template #title>
                  <div style="display: flex;justify-content: space-around;align-items: center;">
                    <div>
                      <span style="font-size: 17px">{{baseInfo.shipmentPort}}</span>
                      <br>
                      <span style="font-size: 14px;color:#ccc;font-weight: 400">ATD:{{baseInfo.atdDate}}</span>
                    </div>
                    <div>
                      <img alt="" src="@/assets/route-info.png"/>
                    </div>
                    <div>
                      <span style="font-size: 17px">{{baseInfo.targetPort}}</span>
                      <br>
                      <span style="font-size: 14px;color:#ccc;font-weight: 400">ATA:{{baseInfo.ataDate}}</span>
                    </div>
                  </div>
                </template>
                <a-timeline>
                  <a-timeline-item color="blue">
                    <template #dot v-if="baseInfo.shipTime">
                      <CheckCircleTwoTone />
                    </template>
                    <span class="timeline-title">发货仓 {{baseInfo.fromWarehouseCode}}</span>
                    <p>装柜 {{baseInfo.shipTime}}</p>
                  </a-timeline-item>
                  <a-timeline-item  color="blue">
                    <template #dot v-if="(baseInfo.atdDate || baseInfo.etdDate)">
                      <CheckCircleTwoTone />
                    </template>
                    <span class="timeline-title">起运港 {{baseInfo.shipmentPort}}</span>
                    <div>
                      <span>进港</span>
                      <span style="margin: 5px;" v-if="baseInfo.atdDate">{{ baseInfo.atdDate }}</span>
                      <span style="margin: 5px;" v-else-if="baseInfo.etdDate"> {{ baseInfo.etdDate }} (ETD) </span>
                    </div>
                    <p>开船 {{ baseInfo.atdDate }}</p>
                  </a-timeline-item>
                  <a-timeline-item  color="blue">
                    <template #dot v-if="baseInfo.unloadContainerTime">
                      <CheckCircleTwoTone />
                    </template>
                    <span class="timeline-title">目的港 {{baseInfo.targetPort}}</span>
                    <div>
                      <span>到港</span>
                      <span style="margin: 5px;" v-if="baseInfo.ataDate">{{ baseInfo.ataDate }}</span>
                      <span style="margin: 5px;" v-else-if="baseInfo.etaDate"> {{ baseInfo.etaDate }} (ETA) </span>
                    </div>
                    <p>卸船 {{ baseInfo.unloadContainerTime }}</p>
                  </a-timeline-item>
                  <a-timeline-item  color="blue">
                    <template #dot v-if="(baseInfo.arrivalWarehouseTime || baseInfo.exceptedArrivalWarehouseTime) && baseInfo.completedTime">
                      <CheckCircleTwoTone />
                    </template>
                    <span class="timeline-title">目的仓 {{baseInfo.warehouseCode}}</span>
                    <p>入仓
                      <span v-if="baseInfo.arrivalWarehouseTime">
                        {{ baseInfo.arrivalWarehouseTime }}
                      </span>
                      <span v-else-if="baseInfo.exceptedArrivalWarehouseTime">
                        {{ baseInfo.exceptedArrivalWarehouseTime }} (ETA)
                      </span>
                    </p>
                    <p>卸货 {{ baseInfo.uploadGoodsTime }}</p>
                    <p>上架 {{ baseInfo.shelvesAddedTime }}</p>
                    <p>完成 {{ baseInfo.completedTime }}</p>
                  </a-timeline-item>
                </a-timeline>
              </a-card>
            </div>
          </div>
        </a-spin>
      </a-tab-pane>
      <a-tab-pane key="2" tab="sku明细">
        <a-button v-if="baseInfo.containerNo" type="primary" @click="handleExport">导出</a-button>
        <common-table
            v-model:loading="tableLoading"
            :columns="columns"
            :dataSource="dataList"
            :scroll="{ x: 'max-content'}"
            :slots="['sizeItem']"
        >
          <template #sizeItem="{record}">
            {{record.length + '*' + record.weight + '*' + record.height + ' cm' + ' | ' + record.sumWeight + ' kg'}}
          </template>
        </common-table>
      </a-tab-pane>
    </a-tabs>
  <baseForm :baseInfo="baseInfo" :openBase="openBase" @close="close"/>
  <trackForm :openTrack="openTrack" :trackInfo="trackInfo" @close="close"/>
  <truckForm :baseInfo="baseInfo" :openTruck="openTruck" @close="close"/>
</template>
<script setup>
import {onMounted,ref,watch} from "vue";
import {useRoute} from "vue-router";
import {getShippingDetail, getShippingInfo, getShippingTrackSkuList} from "@/api/firstShipping/shippingMessage.js";
import {message} from "ant-design-vue";
import CommonTable from "@/components/commonTable/index.vue";
import {postFile} from "@utils/service/index.js";
import BaseForm from "@/views/firstShipping/components/baseForm.vue";
import TrackForm from "@/views/firstShipping/components/trackForm.vue";
import TruckForm from "@/views/firstShipping/components/truckForm.vue";
import {modulePerm} from "@utils/modulePerm.js";
const {id} = useRoute().query
const trackInfo = ref({})
const baseInfo = ref({})
const loading = ref(false)
const openBase = ref(false)
const openTrack = ref(false)
const openTruck = ref(false)
const type = ref('container')
const searchValue = ref('')
const tableLoading = ref(false)
const btnLoading = ref(false)
const activeKey = ref("1")
const imgList = ref([])
const columns = [
  {
    title: '头程计划',
    dataIndex: 'stpoCode',
    key: 'stpoCode',
    align: 'center',
    width: '14%'
  },
  {
    title: '仓库SKU',
    dataIndex: 'warehouseSku',
    key: 'warehouseSku',
    align: 'center',
    width: '14%',
  },
  {
    title: '规格',
    dataIndex: 'sizeItem',
    key: 'sizeItem',
    align: 'center',
    width: '18%'
  },
  {
    title: '体积(cbm)',
    dataIndex: 'volume',
    key: 'volume',
    align: 'center',
    width: '8%'
  },
  {
    title: '总体积(cbm)',
    dataIndex: 'sumVolume',
    key: 'sumVolume',
    align: 'center',
    width: '8%'
  },
  {
    title: '总重量(kg)',
    dataIndex: 'sumWeight',
    key: 'sumWeight',
    align: 'center',
    width: '8%'
  },
  {
    title: '数量',
    dataIndex: 'qty',
    key: 'qty',
    align: 'center',
    width: '8%'
  }
]
const dataList = ref([])
const init = async (id,type,value) => {
  try {
    loading.value = true
    const res = await getShippingDetail({shippingTrackId:id})
    trackInfo.value = res.result
    for (let valueKey in trackInfo.value) {
      if(trackInfo.value[valueKey] === null || trackInfo.value[valueKey] === ''){
        delete trackInfo.value[valueKey]
      }
    }
    let arr = []
    for (let valueKey in trackInfo.value) {
      if(valueKey.includes('Img')){
        arr.push(...trackInfo.value[valueKey].split(','))
      }
    }
    imgList.value = arr
    const res1 = await getShippingInfo({dataType:type,dataId:value})
    baseInfo.value = res1.result
    searchValue.value = baseInfo.value.containerNo
    console.log(baseInfo.value)
  }catch (e) {
    console.log(e)
    message.error(e)
  }finally {
    loading.value = false
  }
}
const search = () => {
  console.log(searchValue.value)
  if(searchValue.value == null || searchValue.value.trim() === ''){
    return message.error('请输入搜索值')
  }
  init(id,type.value,searchValue.value)
}
const reset = () => {
  searchValue.value = ''
}
const handleExport = async () => {
  try{
    btnLoading.value = true
    const res = await postFile('/tms/shippingTrack/detail/exportSkuList','get',{containerNo:baseInfo.value.containerNo},'sku明细.xlsx')
    message.success('导出成功')
  }catch (e){
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}
const handleEdit = (type) => {
  switch (type){
    case 'base':
          openBase.value = true
          break;
    case 'track':
          openTrack.value = true
          break;
    case 'truck':
          openTruck.value = true
          break;
  }
}
const close = (type) => {
  switch (type){
    case 'base':
          openBase.value = false;
          if(searchValue.value == null || searchValue.value.trim() === ''){
            init(id,'id',id);
          }else{
            search()
          }
          break;
    case 'track':
          openTrack.value = false;
          if(searchValue.value == null || searchValue.value.trim() === ''){
            init(id,'id',id);
          }else{
            search()
          }
          break;
    case 'truck':
          openTruck.value = false;
          if(searchValue.value == null || searchValue.value.trim() === ''){
            init(id,'id',id);
          }else{
            search()
          }
          break;
  }
}
watch(() => activeKey.value,async (newVal) => {
  if(newVal === "2"){
    try{
      tableLoading.value = true
      console.log(baseInfo.value)
      const res = await getShippingTrackSkuList({containerNo:baseInfo.value.containerNo})
      dataList.value = res.result.records
      console.log(res)
    }catch (e){
      message.error(e)
    }finally {
      tableLoading.value = false
    }
  }
})
const refresh = () => {
  try{
    init(id,'id',id)
  }catch (e){
    console.log(e)
  }
}
onMounted(()=>{
  refresh()
})
</script>
<style lang="less" scoped>
.container{
  display: flex;
  align-items:stretch;
  justify-content:center;
  height: 100%;
}
.timeline-title{
  font-size: 15px;
  font-weight: bold;
}
</style>
